iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

React Native & Redux 初步探討系列 第 21

Day 21 單向資料流

  • 分享至 

  • xImage
  •  

第 21 天 !

我們來了解 react 的 資料流(data flow)

在我們之前做的To Do List範例來說,

在設定資料的時候,

只單純在 App component 設定了 state,

其他幾個地方,都是依靠 App componentstate 在建立的,

所以我們可以說,

App componentstate 為起點,向下用 props 傳遞,

這樣一層一層往下傳遞。

那假如我們需要改變資料,透過往下傳遞改變資料的 function

來讓來源資料改變,再次向下傳遞

這種就叫做 單向資料流(one way data flow)

like:

const ChildA = ({text})=>{
  return <Text>{text}</Text>
};

class App extends React.Component {
  constructor(props){
    this.state = {
      text: '123'
    }
  }

  render(){
    return (
      <ChildA text={this.state.text}/>
    );
  }
};

因為來源只有一個,所以當我們發生問題時,會依照來源向上追蹤

甚至是改變資料的實際操作,也只會在來源處,

所以比較容易的去追蹤問題


上一篇
Day 20 To Do List - 封裝
下一篇
Day 22 Context
系列文
React Native & Redux 初步探討33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言